<template>
  <el-scrollbar style="height:500px">
    websql
    <el-row :gutter="20">
      <el-col :span="7">
        表：<br>
        {{modelTable}}<br>
        字段：<br>
        <div v-for="(item, key, index) in modelColumList" :key="index">
          {{key}}:{<br>
          <div v-for="(item1, key1, index1) in item" :key="index1">
            &nbsp;&nbsp;{{key1}}:{{item1}}
          </div> }
        </div>
      </el-col>
      <el-col :span="7">
        <!--websql 建表用-->
        <hr>
        websql 建表用
        <hr>
        ,<br>
        {{modelTable.tableName}}: { <br>
        <div v-for="(item, key, index) in modelColumList" :key="index">
          &nbsp;&nbsp;{{item.colName}}: '', // {{item.cnName}}, {{item.colType}}
        </div>
        }
        <!--json-plat-api 列表用-->
        <hr>json-plat-api 列表用<br><hr>
         "tableName": "{{modelTable.tableName}}",<br>
         "cols": {
        <div v-for="(item, key, index) in modelColumList" :key="index">
          &nbsp;&nbsp;"{{item.colName}}": "{{item.cnName}}",
        </div>
        }<hr>
        <!--json-plat-api model用-->
        <hr>json-plat-api model用<br><hr>
        "10": {
          &nbsp;&nbsp;"tableName": "{{modelTable.tableName}}",<br>
          &nbsp;&nbsp;"kind": "insert\\update\\del",<br>
          &nbsp;&nbsp;"idName": "ID"<br>
        }<hr>
        <el-button type="" @click="createTable">建立表</el-button><br>
        <el-button type="" @click="delTable">删除表</el-button><br>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'
import { installWebSQL } from '../../../../packages/websql.js'

</script>

<script setup>
// eslint-disable-next-line import/no-absolute-path
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'

/**
 * websql 相关
 * * 生成建表的依据，对象
 * * 建立websql里面的表
 */

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 数据库
const help = installWebSQL.useHelp('nf-plat-meta')
console.log('help', help)

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta
console.log('modelColumList', modelColumList)

// 建立表
const createTable = () => {
  const table = {}
  for (const key in modelColumList) {
    const col = modelColumList[key]
    table[col.cnName] = ''
  }
  console.log('table', table)
  help.createTable(modelTable.tableName, table)
}

// 删除表
const delTable = () => {
  console.log('准备删除 webSQL 的表：', modelTable.tableName)
  help.deleteTable(modelTable.tableName).then((res) => {
    console.log('删除 webSQL 的表：', modelTable.tableName, res)
  }).catch((err) => {
    console.log('删除 webSQL 的表(失败)：', modelTable.tableName, err)
  })
}

</script>
